<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            .container{
                width: 100%;
                height: 600px;
                display: flex;
                overflow-x: scroll;
                scroll-snap-type:x mandatory;
            }
            .item{
                flex-shrink: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 3em;  
                /* 停止位置 */
                scroll-snap-align: start;   
                scroll-snap-stop: always;
            }
            .item:nth-child(1){
                background: #456156;
            }
            .item:nth-child(2){
                background: #c1ca15;
            }
            .item:nth-child(3){
                background: #4314dd;
            }
        </style>
	</head>
	<body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>

        </div>
	</body>
</html>